<template>
  <div>
    <!-- 欢迎界面 -->
    <div v-show="show == 0">欢迎来到红浪漫</div>

    <!-- 正在加载界面 -->
    <div v-show="show == 1">正在加载...</div>

    <!-- 正常显示用户信息 -->
    <div class="row" v-show="show == 2">
      <!-- 用户信息展示的地方 -->
      <div class="card" v-for="(card, index) in items" :key="card.id">
        <a href="https://github.com/xxxxxx" target="_blank">
          <img :src="card.avatar_url" style="width: 100px" />
        </a>
        <p class="card-text">{{ card.login }}</p>
      </div>
    </div>
    <!-- 请求失败界面 -->
    <div v-show="show == 3">404 NOT FOUND</div>
  </div>
</template>

<script>
//底下的axios是node_modules里面axios模块对外提供的,没有请求、响应拦截器！！！！
// import axios from "axios";
//底下的requests实质就是axios,只不过咱们给他添加上了请求、响应拦截器！！！
import requests from '@/api/requests' 
export default {
  name: "",
  data() {
    return {
      //接受服务器返回用户信息的数据
      items: [],
      show: 0, //这个属性值控制这四种情况切换  0 欢迎界面   1 正在加载  2 展示用户信息  3失败
    };
  },
  //组件挂载完毕:接受兄弟组件传递的关键字数据
  mounted() {
    //通过全局事件总线:获取兄弟组件给的关键字
    this.$bus.$on("sendKeyword", async (params) => {
      //发请求之前:正在加载...
      this.show = 1;
      //第二种写法:Promise->pending、成功、失败
      try {
        //请求成功干什么
        //await等待的是成功的结果
        let result = await requests.get(`/api/search/users?q=${params}`);
        console.log(result);
        //接受服务器返回的数据，在控制台打开看一下!!!!
        this.items = result.items;
        //请求成功show的数值即为2
        this.show = 2;
      } catch (error) {
        //请求失败干什么
        this.show = 3;
      }
    });
  },
};
</script>

<style scoped>
</style>
